<template>
  <div>
    <div class="main">
      <div class="form">
        <el-form :model="formData" :size="'default'" ref="formRef" :rules="rules">
          <div id="title">
            <span>Anan&nbsp;记账</span>
          </div>
          <el-form-item style="margin-top: 50px" prop="email">
            <el-input v-model="formData.email" :prefix-icon="Message" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item prop="password" style="margin-bottom: 30px">
            <el-input v-model="formData.password" :prefix-icon="Lock" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item prop="rpassword">
            <el-input v-model="formData.rpassword" :prefix-icon="Lock" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item prop="checkCode">
            <el-input v-if="proxy.$pp" class="checkCode" :prefix-icon="Check" v-model="formData.checkCode" placeholder="请输入验证码"/>
            <el-input v-if="!proxy.$pp" class="checkCode2" :prefix-icon="Check" v-model="formData.checkCode" placeholder="请输入验证码"/>
            <span v-if="proxy.$pp" id="checkCodeLifespan">{{ checkCodeLifespan }}</span>
            <span v-if="!proxy.$pp" id="checkCodeLifespan2">{{ checkCodeLifespan }}</span>
            <img class="check-code" :src="api.checkCode" @click="getCheckCode" alt="获取图片失败">
          </el-form-item>
          <el-form-item>
            <div>
              已有账号,<a href="javascript:void(0)" class="a-link" @click="router.push('/login')"
                      style="text-decoration: none;">前往登录</a>
            </div>

          </el-form-item>
          <el-form-item>
            <el-button  style="margin-left: auto;margin-right: auto" type="primary" class="loginBtn" @click="register">重置密码</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
    <div style="text-align: center"><a class="a" href="https://beian.miit.gov.cn" target="_blank">蜀ICP备2022026748号-2</a></div>
  </div>
</template>

<script setup>
import {ref, reactive, getCurrentInstance} from "vue";
import {useRouter, useRoute} from "vue-router";
import {Message, Lock, Check} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const proxy = getCurrentInstance().appContext.config.globalProperties;
const router = useRouter();  // 跳转url
const route = useRoute();  // 获取url参数

function checkPassword(rule, value, callback) {
  if (value !== formData.password) {
    callback(new Error('两次密码输入不一致'))
  }
}

const regs = {
  email: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/,
  number: /^([0]|[1-9][0-9]*)$/,
  password: /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*_]{6,}$/,
  shareCode: /^[A-Za-z0-9]+$/
}

function vcode(rule, value, callback) {
  if (value.length < 5) {
    callback(new Error('请输入5位验证码'))
  }
}

const rules = {
  email: [
    {required: true, message: "请输入邮箱", trigger: "blur"},
    {pattern: regs.email, message: "请输入正确的邮箱", trigger: "blur"},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {pattern: regs.password, min: 6, max: 20, message: '请输入 6-20 个字符,包含数字、字母以及特殊符号（!@#$%^&*()等非空格），密码不能与您的邮箱地址相同'}
  ],
  rpassword: [{required: true, message: '请输入密码', trigger: 'blur'}, {validator: checkPassword}],
  checkCode: [{required: true, message: "请输入验证码", trigger: "blur"}, {validator: vcode}],

}
const formData = reactive({
  email: '',
  password: '',
  rpassword: '',
  checkCode: ''
})
const api = reactive({
  checkCode: proxy.$url + '/checkCode'
})
const checkCodeStr = ref('获取验证码')
const checkCodeLifespan = ref(60)

function register() {
  if (formData.email === '' || formData.password === '' || formData.rpassword === '' || formData.checkCode === '' || formData.password !== formData.rpassword) {
    ElMessage({
      type: "error",
      message: "表单验证不通过,请重新填写表单",
      duration: 2000
    })
  } else {
    proxy.$http.post(
        proxy.$url + '/resetPassword?checkCode=' + formData.checkCode,
        formData
    ).then((response) => {
      if (response.data.code === 200) {
        ElMessage({
          type: "success",
          message: response.data.msg,
          duration: 2000
        })
        router.push('/login')
      } else {
        ElMessage({
          type: "error",
          message: response.data.msg,
          duration: 2000
        })
        getCheckCode()
      }
    })
  }


}

function getCheckCode() {
  checkCodeLifespan.value = 60
  api.checkCode = proxy.$url + '/checkCode?time=' + new Date().getTime();
}

setInterval(() => {
  if (checkCodeLifespan.value > 0) {
    checkCodeLifespan.value -= 1
  }
}, 1000)


</script>

<style scoped>
.form {
  /*background: #ffffff;*/
  width: 400px;
  height: 500px;
  padding: 30px;
}

.main {
  height: 800px;
  background: linear-gradient(180deg, #3cadeb, #9c88ff);
  display: flex;
  justify-content: center;
  align-items: center;
}
#title{
  text-align: center;
}

#title span {
  font-weight: 500;
  font-size: 30px;
}

.el-input {
  height: 40px;
}

.el-button {
  width: 120px;
  font-size: 20px;
  margin-left: 150px;
}

.checkCode {
  width: 230px;
  margin-right: 5px;
}
.checkCode2 {
  width: 170px;
  margin-right: 5px;
}

.a {
  color: #000000;
  text-decoration: none;
}


.no-account a {
  text-decoration: none;
}

#checkCodeLifespan {
  position: absolute;
  left: 210px;

}
#checkCodeLifespan2 {
  position: absolute;
  left: 145px;

}

.check-code {
  width: 120px;
  height: 40px;
  margin-left: 5px;
  cursor: pointer;
}

</style>
